/******************** 变量 ********************/
$card-background-color: $component-background;
$card-background-color-disabled: rgba($component-background, 0.5);
$card-background-color-hover: $popup-background;
$card-border-color-checked: $primary-color;
$card-description-color: $text-color-tertiary;

.lv-card {
  position: relative;
  display: block;
  overflow: hidden;
  color: $text-color;
  font-size: $font-size-base;
  line-height: $line-height-coeff;
  background-color: $card-background-color;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-clip: border-box;
  border-radius: $border-radius-lg;

  @include motion-state;
  transition-property: border, background-color, box-shadow, opacity;

  &.lv-card-hoverable:not(.lv-card-disabled):hover {
    background-color: $card-background-color-hover;
    box-shadow: $card-hover-box-shadow;
    cursor: pointer;
  }

  &-bordered {
    border: $border-width-base $border-style-base $card-border-color; // 边框特殊处理，使用1px

    &.lv-card-hoverable:not(.lv-card-shadow):not(.lv-card-disabled):hover {
      border-color: $border-color-hover;
      box-shadow: none;
    }
  }

  &-shadow {
    border: $border-width-base $border-style-base $card-shadow-border-color; // 边框特殊处理，使用1px
    box-shadow: 0.02rem 0.02rem 0 0 $card-shadow-color;
  }

  &.lv-card-checked {
    border: $border-width-base $border-style-base $card-border-color-checked; // 边框特殊处理，使用1px
  }

  &.lv-card-disabled {
    cursor: not-allowed;
    opacity: $card-disabled-opacity;
    &.lv-card-checked {
      border-color: $border-color-secondary;
    }
  }

  &-header {
    padding: $padding-lg;
    font-size: $font-size-lg;
    line-height: $line-height-coeff-minor;

    &-wrapper {
      display: flex;
      align-items: center;
    }

    &-title {
      display: block;
      flex: 1;
      overflow: hidden;
    }
  }

  &-extra {
    float: right;
    margin-left: $margin-lg;
    font-size: $font-size-base;
  }

  &-body,
  &-action {
    padding: 0 $padding-lg $padding-lg;
  }

  &-cover > * {
    display: block;
    width: 100%;
  }

  &-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

.lv-card-header + .lv-card-body,
.lv-card-body + .lv-card-action {
  margin-top: -$margin-sm;
}

.lv-card-meta {
  display: block;

  &-detail {
    display: flex;
    align-items: flex-start;
    margin-top: $margin-lg;
    margin-bottom: $margin-sm;
  }

  &-title-content {
    flex: 1;
    width: 100%;
    line-height: $line-height-coeff-minor;
  }

  &-title {
    display: block;
    font-size: $font-size-lg;
  }

  &-description {
    margin-top: $margin-sm;
    color: $card-description-color;
    font-size: $font-size-sm;
    line-height: $line-height-coeff-minor;
    text-align: left;
  }
}

.lv-card-small {
  .lv-card-header {
    padding: $padding-md;
    font-size: $font-size-base;
    line-height: $line-height-coeff;

    &-title {
      font-weight: $font-weight-bold;
    }
  }

  .lv-card-body,
  .lv-card-action {
    padding: 0 $padding-md $padding-md;
  }

  .lv-card-body + .lv-card-action {
    margin-top: 0;
  }

  .lv-card-extra {
    margin-left: $margin-md;
  }

  .lv-card-meta {
    &-title {
      font-weight: $font-weight-bold;
    }

    &-detail {
      margin-top: $margin-md;
    }
  }
}
